import React from 'react';
import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import { Menu, Card } from 'antd';
import { 
  DollarOutlined, 
  HistoryOutlined, 
  CalculatorOutlined, 
  BarChartOutlined, 
  UserOutlined 
} from '@ant-design/icons';

// 引入子组件
import SalaryList from './SalaryList';
import SalaryDetail from './SalaryDetail';
import SalaryForm from './SalaryForm';
import MySalaryHistory from './MySalaryHistory';
import SalaryCalculate from './SalaryCalculate';
import SalaryStatistics from './SalaryStatistics';

const Salary = () => {
    const navigate = useNavigate();
    
    // 菜单项
    const menuItems = [
        {
            key: 'list',
            icon: <DollarOutlined />,
            label: '薪资管理',
            onClick: () => navigate('/salary')
        },
        {
            key: 'my-history',
            icon: <HistoryOutlined />,
            label: '我的薪资',
            onClick: () => navigate('/salary/my-history')
        },
        {
            key: 'calculate',
            icon: <CalculatorOutlined />,
            label: '薪资计算',
            onClick: () => navigate('/salary/calculate')
        },
        {
            key: 'statistics',
            icon: <BarChartOutlined />,
            label: '薪资统计',
            onClick: () => navigate('/salary/statistics')
        }
    ];
    
    return (
        <div className="salary-container" style={{ display: 'flex' }}>
            {/* 左侧菜单 */}
            <div className="salary-menu" style={{ width: 200, marginRight: 16 }}>
                <Card>
                    <Menu
                        mode="vertical"
                        items={menuItems}
                        defaultSelectedKeys={['list']}
                    />
                </Card>
            </div>
            
            {/* 右侧内容区 */}
            <div className="salary-content" style={{ flex: 1 }}>
                <Routes>
                    <Route path="/" element={<SalaryList />} />
                    <Route path="/detail/:id" element={<SalaryDetail />} />
                    <Route path="/create" element={<SalaryForm />} />
                    <Route path="/edit/:id" element={<SalaryForm />} />
                    <Route path="/my-history" element={<MySalaryHistory />} />
                    <Route path="/calculate" element={<SalaryCalculate />} />
                    <Route path="/statistics" element={<SalaryStatistics />} />
                    <Route path="*" element={<Navigate to="/salary" replace />} />
                </Routes>
            </div>
        </div>
    );

    // 表格列定义
    // const columns = [
    //     {
    //         title: 'ID',
    //         dataIndex: 'id',
    //         key: 'id',
    //         width: 80
    //     },
    //     {
    //         title: '员工姓名',
    //         dataIndex: 'user',
    //         key: 'user',
    //         render: (user, record) => (
    //             <a onClick={() => handleView(record)}>{user?.name || '-'}</a>
    //         )
    //     },
    //     {
    //         title: '年份',
    //         dataIndex: 'year',
    //         key: 'year'
    //     },
    //     {
    //         title: '月份',
    //         dataIndex: 'month',
    //         key: 'month',
    //         render: (month) => month ? `${month}月` : '-'
    //     },
    //     {
    //         title: '基本工资',
    //         dataIndex: 'baseSalary',
    //         key: 'baseSalary',
    //         render: (text) => `¥${text ? text.toLocaleString() : 0}`
    //     },
    //     {
    //         title: '奖金',
    //         dataIndex: 'bonus',
    //         key: 'bonus',
    //         render: (text) => `¥${text ? text.toLocaleString() : 0}`
    //     },
    //     {
    //         title: '实发工资',
    //         dataIndex: 'netSalary',
    //         key: 'netSalary',
    //         render: (text) => `¥${text ? text.toLocaleString() : 0}`
    //     },
    //     {
    //         title: '状态',
    //         dataIndex: 'status',
    //         key: 'status',
    //         render: (status) => {
    //             let color = status === 1 ? 'green' : 'orange'
    //             return <Tag color={color}>{STATUS_MAP[status] || '未知'}</Tag>
    //         }
    //     },
    //     {
    //         title: '发放日期',
    //         dataIndex: 'paymentDate',
    //         key: 'paymentDate',
    //         render: (text) => text ? new Date(text).toLocaleDateString() : '-'
    //     },
    //     {
    //         title: '操作',
    //         key: 'action',
    //         width: 180,
    //         render: (_, record) => (
    //             <Space size="middle">
    //                 <Button 
    //                     type="text" 
    //                     icon={<EditOutlined />} 
    //                     onClick={() => handleEdit(record)}
    //                 >
    //                     编辑
    //                 </Button>
    //                 <Button 
    //                     type="text" 
    //                     danger 
    //                     icon={<DeleteOutlined />} 
    //                     onClick={() => handleDelete(record.id)}
    //                 >
    //                     删除
    //                 </Button>
    //             </Space>
    //         )
    //     }
    // ]

};

export default Salary;